@import 'utils.less';

.view {
  position: relative;
  height: 100%;

  .carousel {
    position: absolute;
    top: 12.5%;
    left: 26%;
    z-index: 20;
  }

  .carousel_EN {
    position: absolute;
    top: 16%;
    left: 26%;
    z-index: 20;
  }

  :global {
    .ant-card-head-title {
      color: #222222;
      font-weight: bold;
      font-size: 18px;
    }

    .ant-card-head {
      padding: 0 24px;
    }
  }
}

.titleOverflow {
  width: 110px;
  white-space: nowrap; /* 不换行 */
  text-align: center;
  text-overflow: ellipsis; /* 显示省略号 */
}

.bg {
  position: absolute;
  top: 0;
  left: 22%;
  z-index: 1;
  width: 50%;
  height: 65%;
  background-image: url('@/assets/img/overview-bg.png');
  background-repeat: no-repeat; /* 不重复 */
  background-size: contain; /* 不重复拉伸填充 */
}

.Report {
  position: absolute;
  top: 0;
  right: 32%;
  z-index: 999;
}

.ChartContent {
  flex-wrap: nowrap;
  gap: 15px;
  height: auto;
  margin-top: 15px;

  .bottomCard {
    z-index: 10;
    width: 33%;
    opacity: 0.8;
  }
}

.DetailText {
  span:first-child {
    color: #000022;
  }

  span:last-child {
    margin-left: 1px;
    color: #999999;
  }
}

.viewContent {
  height: auto;

  .viewBoxLeft {
    width: 29%;
  }

  .viewBoxRight {
    width: 30%;
  }
}

.topCard {
  z-index: 10;
  opacity: 0.8;
}

.topCardStationView {
  z-index: 10;
  opacity: 0.8;
}

.topCardSOC {
  z-index: 10;
  margin-top: 15px;
  opacity: 0.8;
}

.topCardAlarm {
  z-index: 10;
  margin-top: 15px;
  opacity: 0.8;
}

.viewIcon {
  display: inline-flex;
  align-items: flex-start;
  margin-top: 1px;
  color: #1677ff;
  font-size: 18px;
  line-height: 1;
}

.AlarmBox {
  position: relative;
  z-index: 50;
  width: 160px;
  height: 66px;
  padding: 11px 18px;
  color: #444444;
  font-size: 14px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 10px 0 rgba(119, 161, 217, 0.2);
  opacity: 0.8;

  div:last-child {
    margin-top: 2px;
    color: #1a6cfe;
    font-weight: bold;
    font-size: 24px;
  }

  .AlarmBoxUnit {
    font-size: 16px;
  }
}

.AlarmBox:after {
  position: absolute;
  top: 66px;
  right: 0;
  bottom: 0;
  left: 72px;
  width: 12px;
  border-top: solid 8px #fff;
  border-right: solid 8px transparent;
  border-left: solid 8px transparent;
  content: '';
}

.AccumulateDischarge {
  position: absolute;
  top: 33%;
  left: 26%;
}

.CycleTimes {
  position: absolute;
  top: 38%;
  left: 40%;
}

.RatedPower {
  position: absolute;
  top: 14%;
  left: 45%;
}

.AccumulateCharge {
  position: absolute;
  top: 24%;
  left: 57%;
}

.RatedCapacity {
  position: absolute;
  top: 20%;
  left: 32%;
}

.AlarmInfoBox {
  width: 3.3rem;
  height: 20px;
  padding: 1px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.AlarmText {
  display: flex;
  align-items: center;
  justify-content: right;
}

@media (max-width: 1620px) {
  .ChartContent {
    flex-wrap: wrap;
    height: 35%;
    margin-top: 0.3%;

    .bottomCard {
      z-index: 10;
      width: 49%;
      margin-top: 1%;
      opacity: 0.8;
    }
  }

  .view {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    .carousel {
      position: absolute;
      top: 1%;
      left: 1%;
      z-index: 20;
    }

    .topCard {
      z-index: 10;
      height: auto;
      opacity: 0.8;
    }

    .topCardStationView {
      z-index: 10;
      height: auto;
      opacity: 0.8;
    }

    .topCardSOC {
      z-index: 10;
      height: auto;
      margin-top: 20px;
      opacity: 0.8;
    }

    .topCardAlarm {
      z-index: 10;
      height: 57%;
      opacity: 0.8;
    }

    .Report {
      position: absolute;
      top: 0;
      right: 5%;
      z-index: 999;
    }

    .tagGather {
      position: relative;
      width: 100%;
      height: 910px;

      .AccumulateDischarge {
        position: absolute;
        top: 70%;
        left: 15%;
      }

      .CycleTimes {
        position: absolute;
        top: 74%;
        left: 41%;
      }

      .RatedPower {
        position: absolute;
        top: 34%;
        left: 41%;
      }

      .AccumulateCharge {
        position: absolute;
        top: 50%;
        left: 60%;
      }

      .RatedCapacity {
        position: absolute;
        top: 45%;
        left: 22%;
      }
    }

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 1173px;
      height: 671px;
      background-image: url('@/assets/img/overview-bg.png');
      background-repeat: no-repeat; /* 不重复 */
    }

    .viewContent {
      height: auto;

      .viewBoxLeft {
        width: 49%;
      }

      .viewBoxRight {
        width: 49%;
      }
    }
  }
}

// 首页新版样式
.BatteryInfoWrap {
  position: relative;
}

.BatteryBox {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 6;
}

.BatteryReport {
  position: absolute;
  top: 20px;
  right: 150px;
  z-index: 5;
  // background-image: url('@/assets/img/bg_report.png');
  z-index: 6;
  height: 71px;

  a {
    display: block;
    width: 80px;
    margin-top: 16px;
    margin-left: 56px;
    color: #1a6cfe;
    font-size: 12px;
  }
}

.BatteryViewWrap {
  position: relative;
  z-index: 5;
  margin-top: 20px;
}

.BatteryViewBox {
  width: 415px;

  .OpacityCard {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.BatteryDetailsWrap {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: 100%;

  .OpacityCard {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.BatteryViewbg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.BatteryBg {
  position: absolute;
  right: -100px;
  bottom: -50px;
  z-index: 1;
  width: 86%;
  height: 100%;
  background-image: url('@/assets/img/overview-newbg.png');
  background-repeat: no-repeat; /* 不重复 */
  background-size: contain; /* 不重复拉伸填充 */
}

.OpacityCard {
  background: rgba(255, 255, 255, 0.8);
}

.ChartCard {
  :global {
    .ant-card-body {
      padding-right: 0;
      //padding-top: 0;
      padding-left: 0;
    }
  }
}

.BatteryInfoTips {
  position: relative;
  width: 100%;
  height: 100%;

  p {
    margin-bottom: 0;
    line-height: 24px;
  }

  &__title {
    color: #666;
    font-size: 14px;
  }

  &__primaryText {
    color: #1a6cfe;
    font-size: 24px;
  }

  &__unitText {
    color: #1a6cfe;
    font-size: 14px;
  }
}

.LoadPower {
  position: absolute;
  top: 26%;
  right: 21%;
}

.GridPower {
  position: absolute;
  top: 38%;
  right: 42%;
}

.StoragePower {
  position: absolute;
  top: 46%;
  right: 5%;
}

.demandPower {
  position: absolute;
  top: 42%;
  right: 45%;
}

.refluxPower {
  position: absolute;
  top: 33%;
  right: 5%;
}

.realtimeDemand {
  position: absolute;
  top: 50%;
  right: 25%;
}

.PeakValleyWrap {
  position: relative;
  min-height: 70px;
  // position: absolute;
  // width: 100%;
  // left: 0;
  // top: 0;
}

.PeakValley {
  position: absolute;
  width: 100%;
}

.WorkStateWrap {
  position: relative;
  // z-index: 2;
  // background-color: #fff;
}

.colorMapWrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;

  p {
    display: flex;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 0;
    font-size: 12px;

    &:last-child {
      margin-right: 20px;
    }
  }
}

@media (max-width: 1620px) {
  .BatteryViewWrap {
    margin-top: 0;
  }

  .BatteryViewbg {
    position: relative;
    height: 600px;
  }

  .BatteryBg {
    right: 0;
    width: 100%;
  }

  .BatteryInfoBox {
    display: flex;
    flex-direction: column;
  }

  .OrderBox {
    z-index: 2;
    order: 2;
  }

  .GridPower {
    top: 52%;
    right: 69%;
  }

  .LoadPower {
    top: 35%;
    right: 50%;
  }

  .StoragePower {
    top: 58%;
    right: 33%;
  }

  .BatteryViewBox {
    display: flex;
    gap: 20px;
    align-items: start;
    width: 100%;
    margin-top: 20px;

    .OpacityCard {
      flex: 1;
    }
  }

  .BatteryDetailsWrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;

    .OpacityCard {
      box-sizing: border-box;
      width: 49%;
      margin-bottom: 0;
    }
  }

  .Tablet {
    margin-top: 20px;
  }

  .TabletCol {
    width: 49%;
  }
}

.addressEllis {
  display: inline-block;
  margin-right: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
  .px2vw(max-width, 440);
}
